<template>
  <div>
    <h1>shallowRef-shallowReactive</h1>
    <h3>shallowRef示例</h3>
    <h3>{{num}}</h3>
    <h3>姓名：{{ person.name }}</h3>
    <h3>年龄：{{ person.age }}</h3>
    <h3>性别：{{ person.sex }}</h3>
    <button @click="changeNum">修改数量</button>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeSex">修改性别</button>
    <button @click="changePerson">修改整个人</button>
    <h3>shallowReactive示例</h3>
    <h3>{{ car }}</h3>
    <button @click="changePart">修改Part</button>
    <button @click="changeColor">修改Color</button>
  </div>
</template>

<script setup lang='ts' name="shallowRef">
import type { ShallowReactiveMarker } from '@vue/reactivity'
import { ref, reactive, shallowReactive, shallowRef } from 'vue'

//shallow:浅层的
// shallowRef和shallowReactive修改的都是浅层的数据

let num = shallowRef(18)
let person = shallowRef({
  name: '孙悟空',
  age: 500,
  sex: '男'
})
let car = shallowReactive({
  part:'aaa',
  option:{
    color:'蓝色'
  }
  
})
function changeNum(){
  num.value += 2
}
function changeName(){
  person.value.name = '林黛玉'
}
function changeAge(){
  person.value.age = 16
}
function changeSex(){
  person.value.sex = '女'
}
function changePerson(){
  person.value = {name:'唐僧',age:20,sex:'男'}
}
function changePart(){
  car.part = 'bbb'
}
function changeColor(){
  car.option.color = '黑色'
}

</script>


<style lang='scss' scoped></style>